<template>
     <el-card>
        <el-table :data="skuArr" border style="margin: 10px 0px;">
            <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
            <el-table-column label="名称" show-overflow-tooltip width="150px" prop="skuName"></el-table-column>
            <el-table-column label="描述" show-overflow-tooltip width="150px" prop="skuDesc"></el-table-column>
            <el-table-column label="图片" width="150px">
                <template #="{ row, $index }">
                    <img :src="row.skuDefaultImg" alt="" style="width: 100px;height: 100px;">
                </template>
            </el-table-column>
            <el-table-column label="重量" width="150px" prop="weight"></el-table-column>
            <el-table-column label="价格" width="150px" prop="price"></el-table-column>
            <el-table-column label="操作" width="250px" fixed="right">
                <template #="{ row, $index }">
                    <el-button type="primary" size="small" :icon="row.isSale==1?'Bottom':'Top'" @click="updateSale(row)"></el-button>
                    <el-button type="primary" size="small" icon="Edit"></el-button>
                    <el-button type="primary" size="small" icon="InfoFilled" @click="saleDetail(row)"></el-button>
                    <el-popconfirm :title="`你确定要删除${row.skuName}?`" width="200px" @confirm="delSkuSale(row.id)">
                        <template #reference>
                            <el-button v-has="`btn.Sku.remove`" type="primary" size="small" icon="Delete"></el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
            :background="true" layout="prev, pager, next, jumper,->,sizes,total" :total="total" @current-change="getHasSku"
            @size-change="handler" />
        <!-- 抽屉组件:展示商品详情 -->
        <el-drawer v-model="drawer">
            <!-- 标题部分 -->
            <template #header>
                <h4>查看商品的详情</h4>
            </template>
            <template #default>
                <el-row style="margin:10px 0px;">
                    <el-col :span="6">名称</el-col>
                    <el-col :span="18">{{ skuInfo.skuName }}</el-col>
                </el-row>
                <el-row style="margin:10px 0px;">
                    <el-col :span="6">描述</el-col>
                    <el-col :span="18">{{ skuInfo.skuDesc }}</el-col>
                </el-row>
                <el-row style="margin:10px 0px;">
                    <el-col :span="6">价格</el-col>
                    <el-col :span="18">{{ skuInfo.price }}</el-col>
                </el-row>
                <el-row style="margin:10px 0px;">
                    <el-col :span="6">平台属性</el-col>
                    <el-col :span="18">
                        <el-tag style="margin:5px;" v-for="item in skuInfo.skuAttrValueList" :key="item.id">{{
                            item.valueName }}</el-tag>
                    </el-col>
                </el-row>
                <el-row style="margin:10px 0px;">
                    <el-col :span="6">销售属性</el-col>
                    <el-col :span="18">
                        <el-tag style="margin:5px;" v-for="item in skuInfo.skuSaleAttrValueList" :key="item.id">{{
                            item.saleAttrValueName }}</el-tag>
                    </el-col>
                </el-row>
                <el-row style="margin:10px 0px;">
                    <el-col :span="6">商品图片</el-col>
                    <el-col :span="18">
                        <el-carousel :interval="4000" type="card" height="200px">
                            <el-carousel-item v-for="item in skuInfo.skuImageList" :key="item.id">
                                <img :src="item.imgUrl" alt="" style="width:100%;height: 100%;">
                            </el-carousel-item>
                        </el-carousel>
                    </el-col>
                </el-row>
            </template>
        </el-drawer>
    </el-card>
  </template>
      
  <script setup lang='ts'>
  import {ref,onMounted} from 'vue'
  import {reqSkuList,reqSaleSku,reqCancelSale,reqSkuInfo,reqRemoveSku} from '@/api/product/sku/index'
  import {SkuResponseData,SkuData,SkuInfoData} from '@/api/product/sku/type'
  import { ElMessage } from 'element-plus';
  let drawer = ref<boolean>(false)
  let pageNo = ref<number>(1);
  let pageSize = ref<number>(10);
  let total = ref<number>(0);
  let skuArr = ref<SkuData[]>([])  
  let skuInfo = ref<any>({})
  onMounted(()=>{
    getHasSku()
  })
  const getHasSku = async (page=1)=>{
    pageNo.value = page
    let result:SkuResponseData = await reqSkuList(pageNo.value,pageSize.value)
    if(result.code==200){
      skuArr.value = result.data.records
      total.value = result.data.total
    }
  }
  const handler = ()=>{
    getHasSku()
  }
  // 上下架
  const updateSale = async (row:SkuData)=>{
    // 下架
    if(row.isSale==1){
      let res = await reqCancelSale((row.id as number))
      if(res.code==200){
        ElMessage({
          type:'success',
          message:'下架成功'
        })
        getHasSku(pageNo.value)
      }else{
        ElMessage({
          type:'error',
          message:'下架失败'
        })
      }
    }else{
      // 上架
      let res = await reqSaleSku((row.id as number))
      if(res.code==200){
        ElMessage({
          type:'success',
          message:'上架成功'
        })
        getHasSku(pageNo.value)
      }else{
        ElMessage({
          type:'error',
          message:'上架失败'
        })
      }
    }
  }
  // 详情
  const saleDetail= async (row:SkuData)=>{
    let res:SkuInfoData = await reqSkuInfo((row.id as number))
    if(res.code==200){
      skuInfo.value = res.data
      drawer.value = true
    }
  }
  // 删除
  const delSkuSale = async (id:number)=>{
    let res = await reqRemoveSku(id)
    if(res.code==200){
      ElMessage({
        type:'success',
        message:'删除成功'
      })
      getHasSku(skuArr.value.length>1?pageNo.value:pageNo.value-1)
    }else{
      ElMessage({
        type:'error',
        message:'删除失败'
      })
    }
  }
  </script>
      
  <style lang='scss' scoped></style>